<template>
  <div class="container">
    <el-dialog
      :title="this.id == 0 ? '新增文章' : '编辑文章'"
      :visible="showDialog"
      @close="onClose('ruleForm')"
      width="60%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="ruleForm.title"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <froala :tag="'textarea'" v-model="ruleForm.articleBody"></froala>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input
            v-model="ruleForm.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('ruleForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="
            id == 0 ? handelConfirm('ruleForm') : updateArticle('ruleForm')
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from "@/api/hmmm/articles";
import VueFroala from "vue-froala-wysiwyg";
export default {
  inheritAttrs: false,
  name: "addArticle",
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
    },
  },
  data() {
    return {
      ruleForm: {
        title: "",
        articleBody: "",
        videoURL: "",
      },
      rules: {
        title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
        articleBody: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ],
      },
      froalaConfig: {
        toolbarButtons: [
          "undo",
          "redo",
          "clearFormatting",
          "|",
          "bold",
          "italic",
          "underline",
          "strikeThrough",
          "|",
          "fontFamily",
          "fontSize",
          "color",
          "|",
          "paragraphFormat",
          "align",
          "formatOL",
          "formatUL",
          "outdent",
          "indent",
          "quote",
          "-",
          "insertLink",
          "insertImage",
          "insertVideo",
          "embedly",
          "insertFile",
          "insertTable",
          "|",
          "emoticons",
          "specialCharacters",
          "insertHR",
          "selectAll",
          "|",
          "print",
          "spellChecker",
          "help",
          "|",
          "fullscreen",
        ],
        placeholder: "请填写内容",
        language: "zh_cn", //国际化
        imageUploadURL: "http://i.froala.com/upload", //上传url
        fileUploadURL: "http://i.froala.com/upload", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
        quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项
        colorsHEXInput: false, //关闭16进制色值
        toolbarSticky: true, //操作栏是否自动吸顶
        zIndex: 99999,
        events: {
          "froalaEditor.initialized": function () {
            console.log("initialized");
          },
        },
      },
      data: {},
    };
  },
  methods: {
    // 1. 关闭功能
    close(formName) {
      this.$emit("update:showDialog", false);
      this.$refs[formName].resetFields();
    },
    // 2. 关闭
    onClose(formName) {
      this.close(formName);
    },
    // 3. 确认功能
    async handelConfirm(formName) {
      // console.log(this.ruleForm);
      const res = await add(this.ruleForm);
      if (res.status !== 200) {
        return this.$message.error("上传文章失败~");
      } else {
        this.$message.success("上传成功!");
        this.close(formName);
        this.$parent.updateArticles();
      }
    },
    // 3.1 确认功能2
    async updateArticle(formName) {
      const data = {
        id: this.id,
        ...this.ruleForm,
      };
      const res = await update(data);
      if (res.status !== 200) {
        return this.$message.error("更新文章失败~");
      } else {
        this.$message.success("更新成功!");
        this.close(formName);
        this.$parent.updateArticles();
      }
    },
  },
  async mounted() {
    if (this.id !== 0) {
      const data1 = {
        id: this.id,
      };
      const { data } = await detail(data1);
      this.ruleForm.title = data.title;
      this.ruleForm.articleBody = data.articleBody;
    }
  },
};
</script>

<style scoped lang='less'></style>
